<template>
   <div class="content">
      <el-form ref="formRef" style="max-width: 600px" :model="formData" :rules="rules" label-width="100px"
         class="demo-ruleForm" status-icon>
         <el-form-item label="商品名称" prop="name" style="margin-top: 10px;">
            <el-input v-model="formData.name" />
         </el-form-item>
         <el-form-item label="商品图片" prop="img">
            <!-- <el-input v-model="formData.img" /> -->
            <Tuku v-model="formData.img1"></Tuku> &nbsp;
            <Tuku v-model="formData.img2"></Tuku>&nbsp;
            <Tuku v-model="formData.img3"></Tuku>
         </el-form-item>
         <el-form-item label="价格" prop="price">
            <!-- <el-input v-model="formData.img" /> -->
            <el-input-number v-model="formData.price" :precision="2" :step="0.1" />
         </el-form-item>
         <el-form-item label="排序" prop="seq">
            <!-- <el-input v-model="formData.img" /> -->
            <el-input-number v-model="formData.seq" :min="1" :max="10" />
         </el-form-item>
         <el-form-item label="商品介绍" prop="brief">
            <!-- <el-input v-model="formData.brief" /> -->
            <Editors v-model="formData.brief"></Editors>
         </el-form-item>

         <el-form-item label="父关联ID" prop="categoryId">
            <el-tree-select v-model="formData.categoryId" :data="cateGorydata" :render-after-expand="true"
               style="width: 240px" />
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="submitForm(formRef)">
               提交
            </el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>
<script setup lang="ts">
import { ProductApi, CategoryApi } from '@/api';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
//路由跳转 不传递参数
import { useRouter } from 'vue-router';
import Tuku from '@/components/Tuku.vue';
import Editors from '@/components/Editors.vue';

const router = useRouter()
const formRef = ref()
const formData = reactive({
   name: '',
   img: '',
   img1: '',
   img2: '',
   img3: '',
   seq: 0,
   price: 0,
   parentId: 0,
   categoryId: 0,
   brief: ""
})
const cateGorydata = ref([
   {
      value: 0,
      label: '一级目录'
   }
])

const rules = reactive({
   name: [
      { required: true, message: '类目的名称是必填项', trigger: 'blur' },
      // { min: 3, max: 10, message: '必须输入3-5个字符', trigger: 'blur' },
   ],
})

onMounted(() => {
   CallCategoryApi()

})

const CallCategoryApi = () => {
   CategoryApi.select.call().then((cateGorydata1: any) => {
      // console.log(cateGorydata1);
      cateGorydata1.forEach((item: any) => {
         item.value = item.id
         item.label = item.name
      });
      const cateGorydata2 = cateGorydata1.reduce((hezi: any, currentvalue: any) => {
         // console.log("z子类的id：", currentvalue);

         //拿到父类的节点
         currentvalue.children = cateGorydata1.filter((item: any) => {
            return item.parentId === currentvalue.id
         })
         if (currentvalue.parentId === 0) {
            hezi.push(currentvalue)
         }
         return hezi;
      }, [])
      //console.log(cateGorydata2);
      cateGorydata.value = cateGorydata2
   })
}

//构建的方法
const formCategory = () => {
   // formData.img = formData.img1 + "," + formData.img2 + "," + formData.img3
   // console.log(formData.img);
   const imgArray = [];
   if (formData.img1 !='') { 
      imgArray.push(formData.img1)
   }
     if (formData.img2 != '') {
      imgArray.push(formData.img2)
   }
   if (formData.img3 != '') {
      imgArray.push(formData.img3)
   }
   formData.img = imgArray.join(',')
   console.log(formData.img);
   
   
   ProductApi.insert.call({
      name: formData.name, img: formData.img, seq: formData.seq, price: formData.price,
      categoryId: formData.categoryId, brief: formData.brief
   }).then((res) => {
      console.log(res);
      ElMessage.success("恭喜您！！添加成功")
      router.push({ name: 'product-list' })
   })


}

const submitForm = async (formEl: any) => {
   if (!formEl) return
   await formEl.validate((valid: any, fields: any) => {
      if (valid) {
         console.log('submit!')
         formCategory()
      } else {
         console.log('error submit!', fields)
      }
   })
}

const resetForm = (formEl: any) => {
   if (!formEl) return
   formEl.resetFields()
}

</script>
<style scoped>
.content {
   width: 86%;
   background-color: beige;
   border-radius: 6px;
   border: 1px solid silver;
   margin-top: 10px;
   margin-left: 50px;
}
</style>